<template>
	<div class="doctor-patient-container">
		<el-card class="box-card">
			<template slot="header">
				<div class="card-header">
					<div class="header-left">
						<span class="title">我的患者列表</span>
						<span class="subtitle">(共 {{ total }} 位患者)</span>
					</div>
					<div class="header-right">
						<el-input v-model="searchParams.patientName" placeholder="搜索患者姓名" clearable
							style="width: 150px; margin-right: 10px;" @keyup.enter.native="handleSearch"
							@clear="handleSearch" />
						<el-input v-model="searchParams.visitId" placeholder="搜索就诊ID" clearable
							style="width: 150px; margin-right: 10px;" @keyup.enter.native="handleSearch"
							@clear="handleSearch" />
						<el-button type="primary" @click="handleSearch">
							搜索
						</el-button>
						<el-button @click="resetSearch">
							重置
						</el-button>
					</div>
				</div>
			</template>

			<el-table :data="tableData" v-loading="loading" style="width: 100%" stripe border
				:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
				<!-- 序号列 -->
				<el-table-column label="序号" type="index" width="100" align="center" />
				<!-- 患者姓名列 -->
				<el-table-column prop="patientId" label="患者编号" width="240" align="center" />
				<!-- 患者姓名列 -->
				<el-table-column prop="visitId" label="诊疗号" align="center" />
				<!-- 患者姓名列 -->
				<el-table-column prop="patientName" label="患者姓名" align="center" />

				<!-- 性别列 -->
				<el-table-column prop="patientGender" label="性别" align="center">
					<template slot-scope="scope">
						<span>{{ formatGender(scope.row.patientGender) }}</span>
					</template>
				</el-table-column>

				<!-- 年龄列 -->
				<el-table-column prop="patientAged" label="年龄" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.patientAged }}岁</span>
					</template>
				</el-table-column>

				<!-- 就诊状态列 -->
				<el-table-column prop="visitStatus" label="就诊状态" align="center">
					<template slot-scope="scope">
						<el-tag :type="getVisitStatusTagType(scope.row.visitStatus)" size="small">
							{{ formatVisitStatus(scope.row.visitStatus) }}
						</el-tag>
					</template>
				</el-table-column>

				<!-- 操作列 -->
				<el-table-column label="操作" width="220" fixed="right" align="center">
					<template slot-scope="scope">
						<div class="action-buttons">
							<el-button type="primary" size="small" @click="showChangeVisitStatus(scope.row)">
								更改就诊状态
							</el-button>
							<el-button type="success" size="small" @click="openNewMedicalRecordDrawer(scope.row)">
								新建病历
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页-->
			<div class="pagination-container">
				<el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
					:current-page.sync="pagination.pageNum" :page-sizes="[5, 10, 20, 50]"
					:page-size.sync="pagination.pageSize" :total="total"
					layout="total, sizes, prev, pager, next, jumper" background />
			</div>
		</el-card>

		<!-- 更改就诊状态对话框 -->
		<el-dialog :visible.sync="statusDialog.visible" title="更改就诊状态" width="500px" @close="closeStatusDialog">
			<div v-if="currentPatient">
				<el-form :model="statusForm" label-width="100px">
					<el-form-item label="患者姓名">
						<el-input :value="currentPatient.patientName" disabled />
					</el-form-item>
					<el-form-item label="当前状态">
						<el-tag :type="getVisitStatusTagType(currentPatient.visitStatus)">
							{{ formatVisitStatus(currentPatient.visitStatus) }}
						</el-tag>
					</el-form-item>
					<el-form-item label="更改操作" prop="operation">
						<el-select v-model="statusForm.operation" placeholder="请选择操作" style="width: 100%"
							@change="handleOperationChange">
							<el-option label="就诊中" value="1"></el-option>
							<el-option label="出院" value="2"></el-option>
							<el-option label="转院" value="3"></el-option>
							<el-option label="死亡" value="4"></el-option>
							<el-option label="取消" value="5"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="showHospitalSelect" label="目标医院" prop="hospitalId">
						<el-select v-model="statusForm.hospitalId" placeholder="请选择医院" style="width: 100%">
							<el-option v-for="item in hospitalList" :key="item.id" :label="item.hospitalName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="statusForm.remark" type="textarea" :rows="3" placeholder="请输入更改原因的备注"
							maxlength="200" show-word-limit />
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeStatusDialog">取消</el-button>
				<el-button type="primary" @click="submitChangeStatus" :loading="statusDialog.loading">
					确认更改
				</el-button>
			</span>
		</el-dialog>

		<!-- 新建病历抽屉 -->
		<el-drawer
			:visible.sync="recordDrawerVisible"
			title="新建病历"
			direction="rtl"
			size="70%"
			:close-on-click-modal="false"
			@close="resetNewRecordForm"
		>
			<!-- 抽屉头部操作按钮 -->
			<div class="drawer-header-actions" slot="title">
				<span class="drawer-title">新建病历</span>
				<div class="drawer-actions">
					<el-button @click="cancelNewRecord" size="small">取 消</el-button>
					<el-button type="primary" @click="submitNewRecord" size="small" :loading="submitting">
						确 定
					</el-button>
				</div>
			</div>

			<div class="drawer-content">
				<!-- 患者基本信息 -->
				<div class="patient-info-section" v-if="currentPatient">
					<h3>患者基本信息</h3>
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="info-item">
								<span class="label">患者姓名：</span>
								<span class="value">{{ currentPatient.patientName }}</span>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="info-item">
								<span class="label">性别：</span>
								<span class="value">{{ formatGender(currentPatient.patientGender) }}</span>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="info-item">
								<span class="label">年龄：</span>
								<span class="value">{{ currentPatient.patientAged }}岁</span>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="info-item">
								<span class="label">诊疗号：</span>
								<span class="value">{{ currentPatient.visitId }}</span>
							</div>
						</el-col>
					</el-row>
				</div>

				<!-- 病历表单 -->
				<el-form 
					:model="newRecordForm" 
					:rules="newRecordRules" 
					ref="newRecordFormRef" 
					label-width="120px"
					class="record-form"
				>
					<el-divider>病历基本信息</el-divider>
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="病历类型" prop="docType">
								<el-select 
									v-model="newRecordForm.docType" 
									placeholder="请选择病历类型"
									style="width: 100%"
								>
									<el-option label="门诊病历" value="04" />
									<el-option label="入院记录" value="01" />
									<el-option label="病程记录" value="02" />
									<el-option label="出院小结" value="03" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="文书标题" prop="docTitle">
								<el-input 
									v-model="newRecordForm.docTitle" 
									placeholder="请输入文书标题"
									:disabled="!newRecordForm.docType"
								>
									<template slot="prepend">
										{{ getDocTypePrefix(newRecordForm.docType) }}
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-divider>病历内容</el-divider>

					<!-- 主诉（从后端获取） -->
					<el-form-item label="主诉" prop="chiefComplaint">
						<el-input
							type="textarea"
							v-model="newRecordForm.chiefComplaint"
							placeholder="请先获取主诉或直接编辑"
							:rows="3"
							show-word-limit
							maxlength="500"
							:disabled="chiefComplaintLoading"
						>
							<template slot="append">
								<el-button 
									type="primary" 
									size="small" 
									@click="fetchChiefComplaint"
									:loading="chiefComplaintLoading"
									:disabled="!currentPatient || chiefComplaintLoading"
								>
									{{ chiefComplaintLoading ? '获取中...' : '获取主诉' }}
								</el-button>
							</template>
						</el-input>
						<div v-if="chiefComplaintLoading" class="loading-tip">
							<i class="el-icon-loading"></i> 正在获取主诉信息...
						</div>
						<div v-if="chiefComplaintLastFetched" class="last-fetch-time">
							最后获取时间: {{ chiefComplaintLastFetched }}
						</div>
					</el-form-item>

					<!-- 现病史 -->
					<el-form-item label="现病史" prop="historyOfPresentIllness">
						<el-input
							type="textarea"
							v-model="newRecordForm.historyOfPresentIllness"
							placeholder="请输入现病史（疾病发生、发展、演变及诊疗过程）"
							:rows="4"
							show-word-limit
							maxlength="1000"
						/>
					</el-form-item>

					<!-- 既往史 -->
					<el-form-item label="既往史" prop="pastHistory">
						<el-input
							type="textarea"
							v-model="newRecordForm.pastHistory"
							placeholder="请输入既往史（既往健康状况、疾病史、手术史、过敏史等）"
							:rows="3"
							show-word-limit
							maxlength="500"
						/>
					</el-form-item>

					<!-- 体格检查 -->
					<el-form-item label="体格检查" prop="physicalExam">
						<el-input
							type="textarea"
							v-model="newRecordForm.physicalExam"
							placeholder="请输入体格检查结果（生命体征、系统检查等）"
							:rows="4"
							show-word-limit
							maxlength="1000"
						/>
					</el-form-item>

					<!-- 初步诊断 -->
					<el-form-item label="初步诊断" prop="initialDiagnosis">
						<el-input
							type="textarea"
							v-model="newRecordForm.initialDiagnosis"
							placeholder="请输入初步诊断"
							:rows="2"
							show-word-limit
							maxlength="300"
						/>
					</el-form-item>

					<!-- 检查报告 -->
					<el-form-item label="检查报告" prop="reportResult">
						<el-input
							type="textarea"
							v-model="newRecordForm.reportResult"
							placeholder="请输入检查报告结果（化验、影像等）"
							:rows="3"
							show-word-limit
							maxlength="500"
						/>
					</el-form-item>

					<!-- 签名状态 -->
					<el-form-item label="签名状态" prop="signatureStatus">
						<el-radio-group v-model="newRecordForm.signatureStatus">
							<el-radio label="0">草稿</el-radio>
							<el-radio label="1">已签名</el-radio>
						</el-radio-group>
					</el-form-item>

				</el-form>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import http from '../../utils/request'

	export default {
		name: 'DoctorPatientList',
		data() {
			return {
				loading: false,
				tableData: [],
				
				// 搜索参数
				searchParams: {
					patientName: '',
					visitId: ''
				},
				
				// 分页参数
				pagination: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				
				// 医院列表
				hospitalList: [],
				
				// 状态对话框
				statusDialog: {
					visible: false,
					loading: false
				},
				currentPatient: null,
				showHospitalSelect: false,
				statusForm: {
					operation: '',
					hospitalId: '',
					remark: ''
				},
				
				// 新建病历抽屉相关
				recordDrawerVisible: false,
				submitting: false,
				chiefComplaintLoading: false,
				chiefComplaintLastFetched: null,
				
				// 新建病历表单
				newRecordForm: {
					docType: '',
					docTitle: '',
					chiefComplaint: '',
					historyOfPresentIllness: '',
					pastHistory: '',
					physicalExam: '',
					initialDiagnosis: '',
					reportResult: '',
					signatureStatus: '0' // 默认草稿状态
				},
				
				// 表单验证规则
				newRecordRules: {
					docType: [
						{ required: true, message: '请选择病历类型', trigger: 'change' }
					],
					docTitle: [
						{ required: true, message: '请输入文书标题', trigger: 'blur' },
						{ min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
					],
					chiefComplaint: [
						{ required: true, message: '请输入主诉', trigger: 'blur' },
						{ min: 5, max: 500, message: '主诉长度在 5 到 500 个字符', trigger: 'blur' }
					],
					historyOfPresentIllness: [
						{ required: true, message: '请输入现病史', trigger: 'blur' }
					],
					initialDiagnosis: [
						{ required: true, message: '请输入初步诊断', trigger: 'blur' }
					]
				}
			}
		},
		watch: {
			// 监听病历类型变化，自动设置默认标题
			'newRecordForm.docType'(newType) {
				if (newType && this.currentPatient && this.currentPatient.patientName) {
					const prefix = this.getDocTypePrefix(newType);
					const date = new Date().toLocaleDateString();
					this.newRecordForm.docTitle = `${prefix}${this.currentPatient.patientName}-${date}`;
				}
			}
		},
		async created() {
			await this.fetchData()
			// 预加载医院列表
			await this.loadHospitalList()
		},
		methods: {
			// 获取数据
			async fetchData() {
				this.loading = true
				try {
					// 获取当前医生ID
					const doctorId = this.$store.state.user.id || this.$store.state.id

					const params = {
						doctorId: doctorId,
						pageNum: this.pagination.pageNum,
						pageSize: this.pagination.pageSize
					}

					// 添加搜索参数（如果不为空）
					if (this.searchParams.patientName) {
						params.patientName = this.searchParams.patientName
					}
					if (this.searchParams.visitId) {
						params.visitId = this.searchParams.visitId
					}

					const resp = await http.get('/doctor/myPatients', {
						params
					})

					if (resp.data.code === 200 || resp.data.code === 1) {
						const pageData = resp.data.data
						this.tableData = pageData.list || []
						this.total = pageData.total || 0
					} else {
						this.$message.error(resp.data.msg || '获取患者列表失败')
					}
				} catch (error) {
					console.error('获取患者列表失败:', error)
					this.$message.error('获取数据失败，请稍后重试')
				} finally {
					this.loading = false
				}
			},
			
			// 加载医院列表
			async loadHospitalList() {
				try {
					const response = await http.get('/enroll/getHospitalList')
					if (response.data.code === 200 || response.data.code === 1) {
						this.hospitalList = response.data.data || []
					}
				} catch (error) {
					console.error('获取医院列表失败:', error)
				}
			},

			// 格式化性别
			formatGender(genderCode) {
				switch (genderCode) {
					case '1':
						return '男'
					case '2':
						return '女'
					case '0':
						return '未知'
					default:
						return genderCode
				}
			},

			// 格式化就诊状态
			formatVisitStatus(status) {
				switch (status) {
					case '1':
						return '就诊中'
					case '2':
						return '已出院'
					case '3':
						return '已转院'
					case '4':
						return '死亡'
					case '5':
						return '取消'
					default:
						return status
				}
			},

			// 获取就诊状态标签类型
			getVisitStatusTagType(status) {
				switch (status) {
					case '1':
						return 'warning'
					case '2':
						return 'success'
					case '3':
						return 'info'
					case '4':
						return 'danger'
					case '5':
						return 'info'
					default:
						return 'info'
				}
			},

			// 搜索
			handleSearch() {
				this.pagination.pageNum = 1
				this.fetchData()
			},

			// 重置搜索
			resetSearch() {
				this.searchParams = {
					patientName: '',
					visitId: ''
				}
				this.pagination.pageNum = 1
				this.fetchData()
			},

			// 每页大小改变
			handleSizeChange(size) {
				this.pagination.pageSize = size
				this.pagination.pageNum = 1
				this.fetchData()
			},

			// 页码改变
			handlePageChange(page) {
				this.pagination.pageNum = page
				this.fetchData()
			},
			
			// 显示更改就诊状态对话框
			showChangeVisitStatus(row) {
				console.log('选择的行数据:', row)
				this.currentPatient = { ...row }
				// 重置表单
				this.statusForm = {
					operation: '',
					hospitalId: '',
					changeFunction: ''
				}
				this.showHospitalSelect = false
				this.statusDialog.visible = true
			},
			
			// 处理操作选择变化
			handleOperationChange(value) {
				// 只有选择转院时才显示医院选择
				this.showHospitalSelect = value === '3'
				if (!this.showHospitalSelect) {
					this.statusForm.hospitalId = ''
				}
			},
			returnFormatVisitStatus(status){
				switch (status) {
					case '1':
						return '就诊中'
					case '2':
						return '出院'
					case '3':
						return '转院'
					case '4':
						return '死亡'
					case '5':
						return '取消'
					default:
						return status
				}
			},
			// 提交更改状态
			async submitChangeStatus() {
				// 验证
				if (!this.statusForm.operation) {
					this.$message.warning('请选择操作')
					return
				}
				
				// 如果选择转院，需要选择医院
				if (this.statusForm.operation === '3' && !this.statusForm.hospitalId) {
					this.$message.warning('请选择目标医院')
					return
				}
				
				this.statusDialog.loading = true
				try {
					const requestData = {
						visitId: this.currentPatient.visitId,
						changeFunction: this.returnFormatVisitStatus(this.statusForm.operation), // 2:出院, 3:转院, 4:死亡, 5:取消
						hospitalId: this.statusForm.hospitalId,
						remark: this.statusForm.remark,
						doctorId: this.$store.state.user.id || this.$store.state.id
					}
					
					console.log('提交数据:', requestData)
					
					// 调用后端接口
					const resp = await http.post('/doctor/changeVisitStatus', requestData)
					
					if (resp.data.code === 200 || resp.data.code === 1) {
						this.$message.success('就诊状态更新成功')
						this.statusDialog.visible = false
						this.fetchData() // 刷新列表
					} else {
						this.$message.error(resp.data.msg || '更新失败')
					}
				} catch (error) {
					console.error('更新就诊状态失败:', error)
					this.$message.error('更新失败，请稍后重试')
				} finally {
					this.statusDialog.loading = false
				}
			},
			
			// 关闭状态对话框
			closeStatusDialog() {
				this.currentPatient = null
				this.statusForm = {
					operation: '',
					hospitalId: '',
					remark: ''
				}
				this.showHospitalSelect = false
				this.statusDialog.loading = false
				this.statusDialog.visible = false
			},
			
			// 打开新建病历抽屉
			async openNewMedicalRecordDrawer(row) {
				this.currentPatient = { ...row };
				this.recordDrawerVisible = true;
				
				// 重置表单
				this.resetNewRecordForm();
				
				// 设置默认标题（如果有病历类型）
				if (this.newRecordForm.docType && this.currentPatient.patientName) {
					const prefix = this.getDocTypePrefix(this.newRecordForm.docType);
					const date = new Date().toLocaleDateString();
					this.newRecordForm.docTitle = `${prefix}${this.currentPatient.patientName}-${date}`;
				}
				
				// 自动获取主诉
				await this.fetchChiefComplaint();
			},

			// 从后端获取主诉
			async fetchChiefComplaint() {
				if (!this.currentPatient || !this.currentPatient.visitId) {
					this.$message.warning('无法获取患者信息');
					return;
				}
				
				this.chiefComplaintLoading = true;
				try {
					const resp = await http.get(`/doctor/getChiefComplaint`, {
						headers: {
							visitId: this.currentPatient.visitId
						}
					});
					
					if (resp.data.code === 200 || resp.data.code === 1) {
						const data = resp.data.data || {};
						this.newRecordForm.chiefComplaint = data.chiefComplaint || '';
						
						// 记录获取时间
						this.chiefComplaintLastFetched = new Date().toLocaleTimeString();
						
						if (this.newRecordForm.chiefComplaint) {
							this.$message.success('主诉获取成功');
						} else {
							this.$message.warning('未找到该患者的主诉信息');
						}
					} else {
						this.$message.error(resp.data.msg || '获取主诉失败');
					}
				} catch (error) {
					console.error('获取主诉失败:', error);
					this.$message.error('获取主诉失败，请稍后重试');
				} finally {
					this.chiefComplaintLoading = false;
				}
			},

			// 根据病历类型获取标题前缀
			getDocTypePrefix(docType) {
				const prefixMap = {
					'01': '入院记录-',
					'02': '病程记录-',
					'03': '出院小结-',
					'04': '门诊病历-'
				};
				return prefixMap[docType] || '';
			},

			// 提交新建病历
			submitNewRecord() {
				this.$refs.newRecordFormRef.validate(async (valid) => {
					if (valid) {
						this.submitting = true;
						try {
							// 构建病历数据
							const medicalRecordData = {
								visitId: this.currentPatient.visitId,
								docType: this.newRecordForm.docType,
								docTitle: this.newRecordForm.docTitle,
								writerDoctorId: this.$store.state.user.id || this.$store.state.id,
								signatureStatus: this.newRecordForm.signatureStatus,
								hospitalId: this.$store.state.user.hospitalId || 1,
								
								// 病历内容
								chiefComplaint: this.newRecordForm.chiefComplaint,
								historyOfPresentIllness: this.newRecordForm.historyOfPresentIllness,
								pastHistory: this.newRecordForm.pastHistory,
								physicalExam: this.newRecordForm.physicalExam,
								initialDiagnosis: this.newRecordForm.initialDiagnosis,
								reportResult: this.newRecordForm.reportResult,
								
								// 自动生成的时间
								writerTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
							};

							console.log('提交病历数据:', medicalRecordData);
							
							// 这里调用新建病历的接口
							const resp = await http.post('/doctor/newMedicalRecord', medicalRecordData);
							
							// 模拟成功
							if (resp.data.code === 200 || resp.data.code === 1) {
								this.$message.success('病历创建成功！');
								this.recordDrawerVisible = false;
							} else {
								this.$message.error(resp.data.msg || '创建失败');
							}
							
							this.$message.success('病历创建成功！');
							this.recordDrawerVisible = false;
							
						} catch (error) {
							console.error('创建病历失败:', error);
							this.$message.error('创建失败，请稍后重试');
						} finally {
							this.submitting = false;
						}
					} else {
						this.$message.warning('请填写完整的病历信息');
					}
				});
			},

			// 取消新建病历
			cancelNewRecord() {
				this.$confirm('确定要取消新建病历吗？已填写的信息将不会被保存。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.resetNewRecordForm();
					this.recordDrawerVisible = false;
					this.$message.info('已取消新建病历');
				}).catch(() => {
					// 用户点击取消按钮
				});
			},

			// 重置表单
			resetNewRecordForm() {
				this.newRecordForm = {
					docType: '',
					docTitle: '',
					chiefComplaint: '',
					historyOfPresentIllness: '',
					pastHistory: '',
					physicalExam: '',
					initialDiagnosis: '',
					reportResult: '',
					signatureStatus: '0'
				};
				this.chiefComplaintLastFetched = null;
				if (this.$refs.newRecordFormRef) {
					this.$refs.newRecordFormRef.clearValidate();
				}
			}
		}
	}
</script>

<style scoped>
	.doctor-patient-container {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: calc(100vh - 84px);
	}

	.box-card {
		min-height: 500px;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.header-left .title {
		font-size: 18px;
		font-weight: 600;
		color: #303133;
	}

	.header-left .subtitle {
		font-size: 14px;
		color: #909399;
	}

	.header-right {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	/* 表格样式 */
	.el-table {
		margin-top: 10px;
	}

	.el-table th {
		font-weight: 600;
	}

	.el-table .cell {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 分页样式 */
	.pagination-container {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		padding: 15px 0;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.card-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.header-right {
			width: 100%;
			margin-top: 10px;
		}

		.doctor-patient-container {
			padding: 10px;
		}
	}

	.dialog-footer {
		text-align: right;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		gap: 8px;
		justify-content: center;
	}

	/* 患者信息区域 */
	.patient-info-section {
		margin-bottom: 20px;
		padding: 15px;
		background-color: #f8f9fa;
		border-radius: 8px;
		border-left: 4px solid #409eff;
	}

	.patient-info-section h3 {
		margin-top: 0;
		margin-bottom: 15px;
		color: #409eff;
		font-size: 16px;
	}

	.info-item {
		margin-bottom: 8px;
	}

	.info-item .label {
		font-weight: bold;
		color: #606266;
		margin-right: 8px;
	}

	.info-item .value {
		color: #303133;
	}

	/* 表单样式 */
	.record-form {
		overflow-y: auto;
		padding-right: 10px;
	}

	.record-form .el-divider {
		margin: 20px 0;
	}

	.record-form .el-divider__text {
		background-color: #f5f7fa;
		color: #409eff;
		font-weight: bold;
	}

	/* 抽屉头部操作按钮 */
	.drawer-header-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-right: 20px;
	}

	.drawer-title {
		font-size: 18px;
		font-weight: 600;
		color: #303133;
	}

	.drawer-actions {
		display: flex;
		gap: 10px;
	}

	/* 抽屉内容 */
	.drawer-content {
		padding: 20px;
		height: 100%;
		overflow-y: auto;
	}

	/* 主诉获取相关样式 */
	.loading-tip {
		margin-top: 5px;
		color: #409eff;
		font-size: 12px;
	}

	.loading-tip i {
		margin-right: 5px;
	}

	.last-fetch-time {
		margin-top: 5px;
		color: #67c23a;
		font-size: 12px;
	}

	/* 自定义滚动条 */
	.record-form::-webkit-scrollbar {
		width: 6px;
	}

	.record-form::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.record-form::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 3px;
	}

	.record-form::-webkit-scrollbar-thumb:hover {
		background: #a8a8a8;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.action-buttons {
			flex-direction: column;
		}
		
		.el-col {
			margin-bottom: 10px;
		}
		
		.drawer-header-actions {
			flex-direction: column;
			gap: 10px;
			align-items: flex-start;
		}
		
		.drawer-actions {
			width: 100%;
			justify-content: flex-end;
		}
	}
</style>